<template>
  <div>
    <BasicTable @register="register">
      <template #toolbar>
        <a-button type="primary" @click="handleAdd"> 添加 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:info-standard-line',
              onClick: handleDetail.bind(null, record),
            },
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <DetailModal @register="registerDetailModal" />
    <FormModal @register="registerFormModal" @success="handleMessage" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './data';
  import { getUserList } from '/@/api/user';
  import { useModal } from '/@/components/Modal';
  import DetailModal from './detailModal.vue';
  import FormModal from './formModal.vue';
  import { message } from 'ant-design-vue';

  // console.log(provinces);
  //const [register, methods] = useTable(props);
  const [register, { setLoading }] = useTable({
    api: getUserList,
    title: '基础示例',
    titleHelpMessage: '温馨提醒',
    columns: columns,
    // dataSource: data,
    actionColumn: {
      width: 90,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    tableSetting: {
      redo: true, // 刷新按钮
      size: true, // 尺寸调整按钮
      setting: true, // 字段
    },
    showTableSetting: true,
    useSearchForm: true,
    formConfig: {
      labelWidth: 90,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
      compact: true,
    },
  });

  // function handleOpen(record: Recordable) {
  //   console.log('点击了启用', record);
  // }

  function handleAdd() {
    openFormEdit(true, { isUpdate: false });
  }

  function handleDetail(record: Recordable) {
    // 在点击时弹框详情，传入本条数据
    openDetail(true, record);
  }

  function handleEdit(record: Recordable) {
    // 在点击时弹框编辑，传入本条数据
    openFormEdit(true, { isUpdate: true, record });
  }

  function handleDelete(record: Recordable) {
    console.log(record);
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      message.success('Data delete successful!');
    }, 1000);
  }
  // 弹框detailmodal
  const [registerDetailModal, { openModal: openDetail }] = useModal();
  // 弹框formmodal
  const [registerFormModal, { openModal: openFormEdit }] = useModal();

  function handleMessage(isUpdate: boolean) {
    console.log(isUpdate);
    isUpdate ? message.success('Data update successful!') : message.success('Data add successful!');
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }
</script>
